<!-- 企业信息审核 -->
<template>
  <div class="home-page-content">
    <h3>企业用户</h3>
    <Row>
      <Col span="5" class="tree-box">
        <Input search placeholder="请输入关键词" v-model="keywords" @on-change="onSearchTree" />
        <Tree :data="treeData"></Tree>
      </Col>
      <Col span="19" class="table-box">
        <Form ref="formData" :model="formData">
          <Row :gutter="30">
            <Col span="8">
              <FormItem prop="input">
                <Input search placeholder="搜索关键词" v-model="formData.input" />
              </FormItem>
            </Col>
            <Col span="16">
              <Button icon="md-search" type="primary">查询</Button>
            </Col>
          </Row>
        </Form>
        <div class="com-action-table-btn">
          <Button type="warning" @click="onBatchReset">批量密码重置</Button>
        </div>
        <Table :columns="columns" :data="listData" @on-selection-change="onSelectionChange">
          <template slot-scope="{ row }" slot="name">
            <BtnText type="primary" @BtnClick="openUserDetails(row)">{{ row.name }}</BtnText>
          </template>
          <template slot-scope="{ row }" slot="status">
            <BtnPlain type="primary">{{ row.status || '启用' }}</BtnPlain>
          </template>
          <template slot-scope="{ row }" slot="action">
            <BtnText type="primary" @BtnClick="onPasswordReset(row)">密码重置</BtnText>
            <BtnText type="error" @BtnClick="onDisableUser(row)">禁用</BtnText>
          </template>
        </Table>
      </Col>
    </Row>
    <PageAtion
      v-if="total"
      :total="total"
      :size.sync="formData.size"
      :page.sync="formData.page"
      @pageSizeChange="pageSizeChange"
    />

    <Modal v-model="modalFlag" width="900" title="个人用户详情" :mask-closable="false" footer-hide>
      <div class="user-details">
        <Row type="flex" justify="center">
          <Avatar :src="require('../../../assets/muse_theme/images/default-avatar.png')" size="100" />
        </Row>
        <Row type="flex" justify="center" class="mt-20 name">禾马先生</Row>
        <Row type="flex" justify="space-between" class="statistics">
          <Col span="8">
            <Row type="flex" align="middle">
              <img src="../../../assets/icon/icon-user-details-01.png" />
              <div class="sum">
                <p>发布信息数量</p>
                <p>188</p>
              </div>
            </Row>
          </Col>
          <Col span="8">
            <Row type="flex" align="middle">
              <img src="../../../assets/icon/icon-user-details-02.png" />
              <div class="sum">
                <p>被企业接受的信息数量</p>
                <p>188</p>
              </div>
            </Row>
          </Col>
          <Col span="8">
            <Row type="flex" align="middle">
              <img src="../../../assets/icon/icon-user-details-03.png" />
              <div class="sum">
                <p>在已投标阶段的信息数量</p>
                <p>188</p>
              </div>
            </Row>
          </Col>
        </Row>
        <Form ref="modalFormData" :model="modalFormData" :label-width="80">
          <Row>
            <Col span="12">
              <FormItem label="手机号码:" prop="phone">{{ modalFormData.phone }}</FormItem>
            </Col>
            <Col span="12">
              <FormItem label="注册时间:" prop="phone">2022-05-10 12:10:10</FormItem>
            </Col>
            <Col span="12">
              <FormItem label="用户类型:" prop="phone">个人用户</FormItem>
            </Col>
            <Col span="12">
              <FormItem label="状态:" prop="phone">启用</FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    </Modal>
  </div>
</template>

<script>
import { debounce } from 'lodash';
export default {
  name: "userOrganizationManage",
  components: {},
  data () {
    return {
      keywords: '',
      treeData: [
        {
          title: 'parent 1',
          expand: true,
          children: [
            {
              title: 'parent 1-1',
              expand: true,
              children: [
                {
                  title: 'leaf 1-1-1'
                },
                {
                  title: 'leaf 1-1-2'
                }
              ]
            },
            {
              title: 'parent 1-2',
              expand: true,
              children: [
                {
                  title: 'leaf 1-2-1'
                },
                {
                  title: 'leaf 1-2-1'
                }
              ]
            }
          ]
        }
      ],
      formData: {
        input: '',
        page: 1,
        size: 10,
      },
      columns: [
        {
          type: 'selection',
          width: 60
        },
        {
          title: '用户名称',
          key: 'name',
          slot: 'name',
          width: 160
        },
        {
          title: '手机号码',
          key: 'phone',
          width: 130
        },
        {
          title: '用户角色',
          key: 'role',
        },
        {
          title: '发布信息数量',
          key: 'test',
        },
        {
          title: '被企业接受',
          key: 'test',
        },
        {
          title: '经营信息在已投标',
          key: 'test',
        },
        {
          title: '状态',
          key: 'test',
          slot: 'status',
          width: 100
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center',
        },
      ],
      listData: new Array(10).fill(0).map(it => ({
        id: 1,
        name: '用户名称',
        phone: 18888888888,
        role: '企业管理员',
        test: 188
      })),
      total: 10,
      ids: [],
      modalFlag: false,
      modalFormData: {
        phone: '15012312300'
      }
    };
  },
  methods: {
    // 左侧树形图搜索框
    onSearchTree: debounce(function () {
      console.log('111', this.keywords);
    }, 500),
    pageSizeChange (row) {
      console.log(row, 'pageSizeChange', this.formData);
    },
    // 打开用户详情
    openUserDetails (row) {
      this.modalFlag = true
    },
    // 批量密码重置
    onBatchReset () { },
    // table勾选事件
    onSelectionChange (selection) {
      this.ids = selection.map(it => it.id)
      console.log('selection', selection);
    },
    // 密码重置
    onPasswordReset (row) { },
    // 禁用按钮
    onDisableUser (row) { },
  }
};
</script>

<style lang="less" scoped>
.tree-box {
  padding: 20px 20px 0 0;
  border-right: 1px solid #eee;
}
.table-box {
  padding: 20px 0 0 20px;
}
.search-input {
  width: 300px;
  margin-right: 20px;
}
.mt-20 {
  margin-top: 20px;
}

.user-details {
  padding: 20px;
  border-radius: 10px;
  background: linear-gradient(#f5f7ff, #fff 50%);

  .name {
    font-size: 20px;
    font-weight: 500;
  }
}

.statistics {
  padding: 20px 10px;

  img {
    width: 60px;
    height: 60px;
    border-radius: 20px;
    background-color: #eee;
  }

  .sum {
    font-size: 16px;
    font-weight: 500;
    margin-left: 10px;
    line-height: 38px;
    > p:nth-last-child(1) {
      font-size: 22px;
    }
  }
}
</style>
